
<!DOCTYPE html> 
<html> 
<head> 
<title>jQuery Autocomplete: XML as data source</title> 
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.js"></script> 
 
<script> 
	$(document).ready(function() {
		var myArr = [];
	
		$.ajax({
			type: "GET",
			url: "http://localhost:8888/rest/search/all?searchStr=H", // change to full path of file on server
			dataType: "xml",
			success: parseXml,
			complete: setupAC,
			failure: function(data) {
				alert("XML File could not be found");
				}
		});
	
		function parseXml(xml)
		{
			//find every query value
			$(xml).find("stop").each(function()
			{
				myArr.push($(this).attr("label"));
			});	
		}
		
		function setupAC() {
			$("input#searchBox").autocomplete({
					source: myArr,
					minLength: 1,
					select: function(event, ui) {
						$("input#searchBox").val(ui.item.value);
						$("#searchForm").submit();
					}
			});
		}
	});
</script> 
</head> 
<body style="font-size:62.5%;"> 
 
<h1>jQuery Autocomplete using XML as Data Source Example</h1> 
<form name="search_form" id="searchForm" method="GET" action="search_results.html"> 
	<label for="searchBox">Keyword Search</label> 
	<input type="text" id="searchBox" name="searchString" /> 
	
	<button name="searchKeyword" id="searchKeyword">Sumbit</button> 
</form> 
 
</body> 
</html>